<extend name="public/base" />
<block name="main-content">
    <el-card class="box-card" v-loading="loading">
        <!-- card-header -->
        <div slot="header" class="clearfix">
            <span>权限设置</span>
        </div>
        <!-- card-body -->
        <el-row :gutter="15">
            <el-tree 
                ref="authTree"
                :data="authData" 
                node-key="id"
                :default-expanded-keys="checkedKeys"
                :default-checked-keys="checkedKeys"
                :props="defaultProps"
                :check-strictly="noRelated"
                @check="handlCheck"
                show-checkbox>
            </el-tree>
        </el-row>
        <el-row :gutter="15">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button type="primary" @click="goBack">返回</el-button>
        </el-row>
    </el-card>
</block>
<block name="footer-script">
    {__block__}
    <script>
        let vm = new Vue({
            el: '#website',
            data() {
                return {
                    isCollapse: false,
                    loading: false,
                    authData: {$menuData},
                    checkedKeys: {$checked},
                    completeKeys: {$checked},
                    noRelated: true,
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    }
                }
            },
            methods: {
                handlCheck(node, checked) {
                    this.noRelated = false;
                    this.completeKeys = checked.checkedKeys.concat(checked.halfCheckedKeys);
                },
                onSubmit() {
                    this.$message.closeAll();
                    this.loading = true;
                    let vm = this;
                    this.axios.put(
                        '{:url("/" . $Think.const.CONTROLLER . "/$group_id/update")}?_ajax=1', 
                        {keys: JSON.stringify(this.completeKeys)}
                    )
                    .then(function (response) {
                        let data = response.data;
                        if (1 === data.code) {
                            vm.$message(elMessageOptions(data.msg, 'success'));
                            setTimeout(() => {
                                if (data.url)
                                    window.location.href = data.url;

                                // 更新成功返回角色组列表页
                                history.back(-1);
                            }, 2000)
                        } else if (0 === data.code) {
                            vm.loading = false;
                            vm.$message(elMessageOptions(data.msg));
                        }
                    })
                    .catch(function (error) {
                        vm.loading = false;
                        vm.$message(elMessageOptions(adminEditingError(error)));
                    })
                }
            }
        })
    </script>
</block>